import { defineComponent, onMounted, type PropType, ref, toRefs, unref } from 'vue'
import { Button, Card, Form, FormItem, Input, InputNumber, Modal, Select, Table, Textarea } from 'ant-design-vue'
import { useDetail } from './use-detail'
import { useForm } from './use-form'
import { BusinessPageTypeEnum } from '@/enums/pageTypeEnum'
import { vehicleListOptions } from '@/api/warehouse/sale-return-order'
import { useColumns, useScanColumns } from '@/views/warehouse/vehicle-bring-goods/detail/use-scan-code-columns'

const props = {
  code: {
    type: [String, Number],
    required: false
  },
  businessType: {
    type: String as PropType<BusinessPageTypeEnum>,
    required: true,
    validator: (value: string) => {
      // 检查传入的值是否在枚举的有效值中
      return Object.values(BusinessPageTypeEnum).includes(value as BusinessPageTypeEnum)
    }
  }
}

const DataDetail = defineComponent({
  emits: ['cancelModal', 'confirmModal'],
  props,
  name: 'DataDetail',
  setup(props, ctx) {
    const { meta, state, initForm, getFormValues } = useForm()
    const { status, createOrUpdate, getVehicleBringForm } = useDetail(getFormValues)

    const { getColumns, tableColumns } = useColumns()
    const saleReturnOrderOption = ref()

    const saleVehicleList = ref()
    const returnVehicleList = ref()
    const manyVehicleList = ref()
    const lackVehicleList = ref()

    const handleCommit = async () => {
      await createOrUpdate()
      initForm()
      ctx.emit('confirmModal')
    }

    const resetForm = () => {
      initForm()
      ctx.emit('cancelModal')
    }

    onMounted(async () => {
      await fetchData()
      saleReturnOrderOption.value = await vehicleListOptions({ vehicleBringGoodsCode: props.code })
    })

    const fetchData = async () => {
      if (props.businessType === BusinessPageTypeEnum.UPDATE || props.businessType === BusinessPageTypeEnum.DETAIL) {
        // 查询值
        state.detailForm = await getVehicleBringForm(props.code)
        saleVehicleList.value = state.detailForm.vehicleBringScanCodeFormList?.filter(model => model.scanType == 1)
        returnVehicleList.value = state.detailForm.vehicleBringScanCodeFormList?.filter(model => model.scanType == 2)
        manyVehicleList.value = state.detailForm.vehicleBringScanCodeFormList?.filter(model => model.scanType == 3)
        lackVehicleList.value = state.detailForm.vehicleBringScanCodeFormList?.filter(model => model.scanType == 4)
      }
    }

    return {
      ...toRefs(props),
      ...toRefs(state),
      ...toRefs(status),
      ...toRefs(meta),
      saleReturnOrderOption,
      handleCommit,
      resetForm,
      getColumns,
      tableColumns,
      saleVehicleList,
      returnVehicleList,
      manyVehicleList,
      lackVehicleList
    }
  },
  render() {
    const {
      code,
      businessType,
      detailForm,
      rules,
      saleReturnOrderOption,
      getColumns,
      tableColumns,
      handleCommit,
      resetForm,
      saleVehicleList,
      returnVehicleList,
      manyVehicleList,
      lackVehicleList
    } = this
    // @ts-ignore
    return (
      <>
        <Card>
          <Form
            ref='detailFormRef'
            model={detailForm}
            rules={rules}
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 17 }}
            style={{ width: '80%' }}
            onFinish={handleCommit}
          >
            <FormItem label='车辆信息' name='shopCode'>
              <Input
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.licenseNumber, 'value']}
                show-count
                maxlength={10}
              />
            </FormItem>
            <FormItem label={'绑定销售退货单'} name={''}>
              <Select
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                mode={'multiple'}
                v-model={[detailForm.saleReturnCodeList, 'value']}
                options={saleReturnOrderOption}
              />
            </FormItem>
            <FormItem label='出车数量' name='saleNumber'>
              <Input disabled v-model={[detailForm.saleNumber, 'value']} />
            </FormItem>
            <FormItem label='回车数量' name='returnNumber'>
              <Input disabled v-model={[detailForm.returnNumber, 'value']} />
            </FormItem>
            <FormItem label='多出数量' name='manyNumber'>
              <Input disabled v-model={[detailForm.manyNumber, 'value']} />
            </FormItem>
            <FormItem label='少于数量' name='lackNumber'>
              <Input disabled v-model={[detailForm.lackNumber, 'value']} />
            </FormItem>
            {saleVehicleList != null && saleVehicleList.length > 0 && (
              <Card title={'出货数据'}>
                <Table
                  rowKey='id'
                  columns={tableColumns}
                  style={{ width: '1000px' }}
                  dataSource={unref(saleVehicleList)}
                  pagination={false}
                  bordered
                >
                  {{
                    bodyCell: ({ column, record }) => getColumns(column, record)
                  }}
                </Table>
              </Card>
            )}
            {returnVehicleList != null && returnVehicleList.length > 0 && (
              <Card title={'回货数据'}>
                <Table
                  rowKey='id'
                  columns={tableColumns}
                  style={{ width: '1000px' }}
                  dataSource={unref(returnVehicleList)}
                  pagination={false}
                  bordered
                >
                  {{
                    bodyCell: ({ column, record }) => getColumns(column, record)
                  }}
                </Table>
              </Card>
            )}
            {manyVehicleList != null && manyVehicleList.length > 0 && (
              <Card title={'多余数据'}>
                <Table
                  rowKey='id'
                  columns={tableColumns}
                  style={{ width: '1000px' }}
                  dataSource={unref(manyVehicleList)}
                  pagination={false}
                  bordered
                >
                  {{
                    bodyCell: ({ column, record }) => getColumns(column, record)
                  }}
                </Table>
              </Card>
            )}
            {lackVehicleList != null && lackVehicleList.length > 0 && (
              <Card title={'缺少数据'}>
                <Table
                  rowKey='id'
                  columns={tableColumns}
                  style={{ width: '1000px' }}
                  dataSource={unref(lackVehicleList)}
                  pagination={false}
                  bordered
                >
                  {{
                    bodyCell: ({ column, record }) => getColumns(column, record)
                  }}
                </Table>
              </Card>
            )}
            <FormItem wrapperCol={{ span: 12, offset: 12 }}>
              <>
                <Button type='primary' htmlType='submit'>
                  提交
                </Button>
                <Button style={{ marginLeft: '12px' }} onClick={resetForm}>
                  取消
                </Button>
              </>
            </FormItem>
          </Form>
        </Card>
      </>
    )
  }
})
export default DataDetail
